<template>
  <div class="divisional">

    <!-- 查询 -->
    <div class="search_box" style="width: 95%;">
      <el-row :gutter="20">
        <el-form :inline="true" :model="searchForm" class="demo-form-inline" ref="searchFormRef">
          <el-col :span="6">
            <el-form-item label="姓名" prop="name" >
              <el-input v-model="searchForm.name" size="small" placeholder="姓名"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="证件号码" prop="identificationNumber" >
              <el-input v-model="searchForm.identificationNumber" size="small" placeholder="证件号码"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-form-item label="卡号" prop="cardNumber" >
              <el-input v-model="searchForm.cardNumber" size="small" placeholder="卡号"></el-input>
            </el-form-item>
          </el-col>


          <el-col :span="6">
            <el-form-item label="卡种" prop="cardType" style="margin-left: 10px">
              <el-select v-model="searchForm.cardType" placeholder="请选择卡种" >
                <el-option label="通联" value="1"></el-option>
                <el-option label="银数" value="2"></el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <!-- <el-col :span="6">
            <el-form-item label="失联原因" prop="status">
              <el-select v-model="searchForm.status" placeholder="请选择卡种" size="small">
                <el-option label="未接听" value="1"></el-option>
                <el-option label="已关机" value="2"></el-option>
                <el-option label="空号" value="3"></el-option>
                <el-option label="非本人" value="4"></el-option>
              </el-select>
            </el-form-item>
          </el-col> -->


          <el-col :span="6" style="height: 65px">
            <span class="inpText" style="">失联原因</span>
            <el-select v-model="lost"  placeholder="请选择" style="width: 66%; margin-left: 25px">
              <el-option v-for="item in options" :key="item.chinese" :label="item.chinese" :value="item.number" size="small"></el-option>
            </el-select>
          </el-col>


          <el-col :span="8" id="rqfw"  style="margin-left: 40px"  >
            <span style="">失联时间</span>
            <el-date-picker v-model="dateVal" type="daterange"   format="yyyy-MM-dd" value-format="yyyy-MM-dd"
              range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" style="width: 350px;margin-left: 25px"></el-date-picker>
          </el-col>




          <div align="right" style="padding-right: 36px;">
            <el-button type="primary" size="small" @click="onSubmitSearch">查询</el-button>
            <el-button type="primary" size="small" @click="onSubmitInsert">录入</el-button>
            <el-button type="primary" size="small" @click="restSearchForm()">重置</el-button>
          </div>
        </el-form>
      </el-row>
    </div>


    <!-- 列表展示页面 -->
    <el-table :header-cell-style="{background:'LightYellow	',color:'black'}" :data="tableData.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))"
      style="width: 100%">

      <el-table-column type="index" label="序号" :index="indexMethod"></el-table-column>

      <el-table-column label="客户姓名" prop="name">
      </el-table-column>

      <el-table-column label="证件号码" :formatter="hidInfo" prop="identificationNumber">
      </el-table-column>


      <el-table-column label="卡号" prop="cardNumber" :formatter="hidInfo">
      </el-table-column>

      <el-table-column label="卡种" prop="cardType">
        <template slot-scope="scope">
          <p v-if="scope.row.cardType==1">通联</p>
          <p v-if="scope.row.cardType==2">银数</p>
        </template>
      </el-table-column>


      <el-table-column prop="dele" label="失联原因"></el-table-column>


      <el-table-column label="失联或者停催的时间" prop="dataTime">
      </el-table-column>


      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" type="text" @click="handleEdit(scope.$index, scope.row)">详情</el-button>
          <el-button size="mini" type="text" @click="handleLuojiDelete(scope.$index, scope.row)">出库</el-button>

        </template>
      </el-table-column>
    </el-table>

    <div class="pageBox">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
        :page-sizes="[5,10, 15,20]" :page-size="pageSize" :total="total" layout="total, sizes, prev, pager,next, slot, jumper">
      </el-pagination>
    </div>


    <!-- 失联详情 数据-->

    <el-dialog title="详情信息" :visible.sync="DetailsDialog">
      <el-form ref="DetailsForm" :model="Detailsform" label-width="80px">

        <el-divider content-position="left">基本信息</el-divider>

        <el-row :gutter="20">

          <el-col :span="12">
            <el-form-item label="客户姓名">
              <el-input v-model="Detailsform.name" :disabled="true"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="证件号码">
              <el-input v-model="Detailsform.identificationNumber" :disabled="true"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="卡号">
              <el-input v-model="Detailsform.cardNumber" :disabled="true"></el-input>
            </el-form-item>
          </el-col>


          <el-col :span="12">
            <el-form-item label="所属卡种">
              <el-input v-show="Detailsform.cardType=='1'" value="通联" :disabled="true"></el-input>
              <el-input v-show="Detailsform.cardType=='2'" value="银数" :disabled="true"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="失联时间">
              <el-input v-model="Detailsform.dataTime" :disabled="true"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="失联原因">
              <el-select v-model="Detailsform.dele" size="small" placeholder="请选择" :disabled="true">
                <el-option v-for="item in options" :key="item.chinese" :label="item.chinese" :value="item.number" size="small"></el-option>
              </el-select>

            </el-form-item>
          </el-col>


        </el-row>

      </el-form>

    </el-dialog>


    <el-dialog title="录入失联名单" :visible.sync="InsertDialog">

      <el-form :model="Insertform" :rules="rules" ref="Insertform" label-width="100px" class="demo-ruleForm">

        <el-divider content-position="left">基本信息</el-divider>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="客户姓名" prop="name" >
              <el-input v-model="Insertform.name" placeholder="客户姓名"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="证件号码" prop="identificationNumber">
              <el-input v-model="Insertform.identificationNumber" placeholder="证件号码"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="卡号" prop="cardNumber">
              <el-input v-model="Insertform.cardNumber" placeholder="卡号"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="卡种" prop="cardType">
              <el-select v-model="Insertform.cardType" placeholder="请选择卡种"  size="small">
                <el-option label="通联" value="1"  size="small"></el-option>
                <el-option label="银数" value="2"  size="small"></el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <!-- <el-col :span="12">
            <el-form-item label="失联原因" prop="status">
              <el-select v-model="Insertform.status" placeholder="请选择活动区域">
                <el-option label="未接听" value="1"></el-option>
                <el-option label="已关机" value="2"></el-option>
                <el-option label="空号" value="3"></el-option>
                <el-option label="非本人" value="4"></el-option>
              </el-select>
            </el-form-item>
          </el-col> -->




          <el-col :span="12">
            <el-form-item label="失联时间" prop="dataTime">
              <el-date-picker type="date" placeholder="选择日期" v-model="Insertform.dataTime" style="width: 100%;"></el-date-picker>
            </el-form-item>
          </el-col>
<!--

          <el-col :span="12">
            <el-form-item label="进入名单库原因" prop="status">
              <el-select v-model="Insertform.status" placeholder="进入名单库原因">
                <el-option label="失联" value="1"></el-option>
                <el-option label="停催" value="2"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
-->




          <el-col :span="12">
          <el-form-item label="失联原因" prop="dele">
            <el-select v-model="Insertform.dele" size="small" placeholder="请选择">
              <el-option v-for="item in options" :key="item.chinese" :label="item.chinese" :value="item.number" size="small"></el-option>
            </el-select>
          </el-form-item>
          </el-col>

          <el-col :span="24">
            <center>
              <el-button type="primary" @click="onSubmitGotoInsert('Insertform')">点击申请</el-button>
              <el-button @click="InsertDialog = false">取消申请</el-button>
             <!-- <el-button @click="rest()">重置页面</el-button> -->
            </center>
          </el-col>
        </el-row>

      </el-form>

    </el-dialog>



  </div>
</template>

<script>
  import {
    cmcUrl
  } from '../../../../static/baseUrl';
  import {
    Message
  } from "element-ui";
  export default {
    data() {
      return {
        dateVal: "",
        Insertform: {
          name: "",
          identificationNumber: "",
          cardNumber: "",
          cardType: "",
          dataTime: "",
          status: "1",
          dele: ""
        },
        rules: {
          status: [{
            required: true,
            message: '请选择进入名单库原因',
            trigger: 'blur'
          }, ],
          name: [{
            required: true,
            message: '请输入活动名称',
            trigger: 'blur'
          }, ],
          identificationNumber: [{
            required: true,
            message: '请输入证件号码',
            trigger: 'change'
          }],
          cardNumber: [{
            required: true,
            message: '请输入卡号',
            trigger: 'change'
          }],
          cardType: [{
            required: true,
            message: '请至少选择一个卡种',
            trigger: 'change'
          }],
          dataTime: [{
            required: true,
            message: '请选择时间',
            trigger: 'change'
          }],
          dele: [{
            required: true,
            message: '请选择失联原因',
            trigger: 'blur'
          }]
        },
        currentPage: 1,
        total: 0,
        pageSize: 5,
        InsertDialog: false,
        DetailsDialog: false,
        Detailsform: {},
        searchForm: {
          status: "",
          name: "",
          identificationNumber: "",
          cardNumber: "",
          cardType: "",
          dataTime: ""
        },
        search: '',
        tableData: [],
        lost: "",
        options: [],
      }
    },
    methods: {
      /* 获取失联原因下拉*/
      getStopReason() {
        this.$axios({
            method: "get",
            url: `/CMC/feedBack/selectList/type`,
            data: "",
          })
          .then((res) => {
            console.log(res, "查询数据");
            if (res.code == 200) {
              this.options = res.data.slFeedBack;
              console.log("this.options== ", this.options);
            } else {
              Message.warning(res.message);
            }
          })
          .catch((err) => {});
      },





      indexMethod(index) {
        index = (index + 1) + (this.currentPage - 1) * this.pageSize;
        return index
      },
      handleLuojiDelete(index, row) {
        this.$confirm('此操作将逻辑删除该条数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$axios({
              method: "post",
              url: `/CMC/stop/notice/person/delete`,
              data: "",
              params: {
                id: row.id
              },
            })
            .then((res) => {
              if (res.code == 200) {
                this.$message({
                  type: 'success',
                  message: '删除成功!'
                });
              }
              this.initData();
            });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      /* 重置  录入*/
      rest() {
        this.$refs.Insertform.resetFields();
      },

      /* 分页*/
      handleCurrentChange(data) {
        this.currentPage = data;
        this.initData();
      },
      /* 分页*/
      handleSizeChange(data) {
        console.log(data, "handleSizeChange");
        this.pageSize = data;
        this.initData();
      },
      initData() {

        let lost = this.lost;


        //开户时间范围
        let startTime = this.dateVal === null ? null : this.dateVal[0];
        let endTime = this.dateVal === null ? null : this.dateVal[1];


        this.$axios({
            method: "post",
            url: `/CMC/stop/notice/person/list`,
            params: {
              name: this.searchForm.name,
              identificationNumber: this.searchForm.identificationNumber,
              cardNumber: this.searchForm.cardNumber,
              cardType: this.searchForm.cardType,
              status: this.searchForm.status,
              /* 	dateTime: this.searchForm.dateTime, */
              /*  分页 参数*/
              page: this.currentPage,
              pageSize: this.pageSize,
              /* 时间段 查询*/
              startTime: startTime,
              endTime: endTime
            }
          })
          .then((res) => {
            if (res.code == 200) {
              this.tableData = res.data.list;
              this.total = Number(res.data.total);
            } else {
              Message.warning(res.message);
            }
          })
          .catch((err) => {});
      },
      restSearchForm() {
        this.$refs.searchFormRef.resetFields();
        this.dateVal = "";
      },
      onSubmitInsert() {
        this.InsertDialog = true;
        /* this.rest(); */
      },
      onSubmitGotoInsert(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.$axios({
                method: "post",
                url: `/CMC/stop/notice/person/add`,
                data: this.Insertform,
              })
              .then((res) => {
                if (res.code == 200) {
                  this.InsertDialog = false;
                  this.initData();
                } else {
                  Message.warning(res.message);
                }
              })
              .catch((err) => {});

          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      onSubmitSearch() {
        this.initData();
      },
      handleEdit(index, row) {
        this.DetailsDialog = true;
        this.Detailsform = row;
        console.log("this.Detailsform=",this.Detailsform);
      },
      handleDelete(index, row) {
        console.log(index, row);
      }
    },
    created() {
      this.initData();
      this.getStopReason();
    }
  }
</script>
<style lang="scss" scoped>
  .divisional {
    /deep/ .el-row:nth-child(1) {
      width: 100%;
      height: 1px;
      // background: pink;
      padding: 0;
      margin: 0;

      .el-col {
        padding: 0;
        height: inherit;
        /* border: 1px solid slategrey; */
        box-sizing: border-box;
        overflow: hidden;

        .el-form-item__content {
          line-height: 32px;

    }


    div:nth-child(1) {
      width: 100%;
      height: inherit;
      //   background: yellowgreen;
      display: flex;
      flex-wrap: wrap;
      // justify-content: flex-start;
      justify-content: space-around;
      box-sizing: border-box;
      /* padding-left: 30px;
       padding-top: 40px; */
          overflow-y: auto;

          .v_box {
            width: 20%;
            height: 8vh;
            margin-left: 15px;
            margin-right: 40px;
            // margin-bottom: 10px;
            // background: chocolate;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            padding: 0;
            border: none;

            div {
              padding: 0;
            }

            &:nth-child(7) {

              .el-date-editor--daterange.el-input,
              .el-date-editor--daterange.el-input__inner,
              .el-date-editor--timerange.el-input,
              .el-date-editor--timerange.el-input__inner {
                width: 100%;
              }
            }

            &:last-child {
              display: flex;
              flex-direction: row;
              justify-content: center;
              align-items: center;

              .el-button {
                width: 70px;
                height: 30px;

                &:first-child {
                  margin-right: 10px;
                }
              }
            }
          }
        }
      }
    }

    /deep/ .el-row:nth-child(2) {
      width: 100%;
      /* height: 60vh; */
      // background: pink;
      padding: 0;
      margin: 0;
      margin-top: 10px;

      table {
        tbody {
          tr {
            td {
              .cell {
                box-sizing: border-box;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                word-break: normal !important;
                line-height: inherit;
                //   padding-right: 10px;
              }
            }
          }
        }
      }
    }

    .pageBox {
      display: flex;
      width: 100%;
      justify-content: left;
      margin-top: 10px;
    }


    /deep/ .el-dialog {
      .mainInfoBox {
        width: 100%;
        max-height: 60vh;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-start;
        flex-wrap: wrap;
        overflow-y: auto;

        .infoBox {
          display: flex;
          flex-direction: row;
          justify-content: center;
          align-items: center;
          height: 40px;
          width: 30%;

          label {
            width: 100px;
          }

          .el-input {
            flex: 1 1 auto;
          }
        }
      }
    }
  }


  .search_box {
    background: #fff;
    border-radius: 10px;
    padding: 40px 40px 175px 40px;
    margin: 0 0 20px 0;
  }

  .box_center {
    text-align: left;
  }

  .searchBtn {
    margin-left: 80px;
  }

  .search_box .inpText {
    width: 75px;
    justify-content: space-between;
    text-align: right;
    display: inline-block;
  }

  #rqfw .el-range-editor.el-input__inner {
    padding: 2px 2px;
  }
</style>
